<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: grey;
            margin: 50px;
            overflow: hidden;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sub">
            <span>123123</span>
        </div>
    </div>
</body>
<script>
    // 事件对象 => 事件触发时的相关信息 (什么时间 发生了什么类型的事件 发生在谁身上  鼠标 => 按键,鼠标的位置  键盘 => 字符,键盘符 中文)

    // 如何获取事件对象 ? 
    // (1) 常规浏览器  => 在绑定的事件函数中 添加形参(e evt event)
    // (2) 低版本IE   => window.event

    // 兼容 
    // var e = e || window.event;


    // 事件对象 通用
    // timeStamp    从页面加载完毕 到 事件触发 经过的时间
    // type         触发事件的类型 (click dblclick mousedown  keydown)
    // target       事件源(触发事件的元素)  => 给父元素绑定事件,子代元素也可以触发 => 如果需要知道触发事件的元素 => 事件源
    // srcElement   事件源(IE/常规浏览器) 
    // e.target  || e.srcElement 
    // path         从事件源开始和所有父代元素的数组

    // altKey        事件触发时alt键是否被按下
    // ctrlKey       事件触发时ctrl键是否被按下
    // shiftKey      事件触发时shift键是否被按下
    // metaKey       事件触发时win键是否被按下

    // 常用于做  组合键  ctrl + c  ctrl + c   ctrl + enter


    var box = document.querySelector(".box");

    box.onclick = function (e) {   // this -> box 绑定事件的元素
        // console.log(e);   

        // 前面有值就取前面的 没有值就取后面 (将前面的值作为表达式 true=>前面 false=>后面的)
        // var e = e ? e : window.event;
        var e = e || window.event;

        console.log(e);
        // console.log(e.timeStamp);
        // console.log(e.type);
        // console.log(e.target);
        // console.log(e.path);

        console.log(e.ctrlKey, e.shiftKey, e.altKey, e.metaKey);






    }



</script>

</html>